<template>

  <el-config-provider :size="size" :z-index="zIndex">
  <n-config-provider>
        <n-message-provider>
          <n-dialog-provider>
            <div class="switch-bar">
              <n-button strong secondary type="tertiary" @click="listenComponentSwitch">{{ targetView === defaultView ? 'To Charts' : 'To Data' }}</n-button>
            </div>
<!--            <Index v-if="targetView === 'dashboard'" />-->
            <List v-if="targetView === 'index'" />
            <Dashboard v-else />
          </n-dialog-provider>
        </n-message-provider>
    </n-config-provider>
  </el-config-provider>

</template>
<script setup>
    import { NConfigProvider, NMessageProvider, NDialogProvider } from 'naive-ui';
    // import Index from './views/index.vue';
    import Dashboard from './views/dashboard.vue';
    import List from './views/list.vue';
    import { ref } from 'vue'
    import { NButton } from 'naive-ui'
    import { ElConfigProvider } from 'element-plus'

    const defaultView = 'index';
    const targetView = ref('index');
    const size=ref('default')
    const zIndex = ref(2)
    const listenComponentSwitch = () => {
        const switchComponentReference = { dashboard: 'index', index: 'dashboard' };
        targetView.value = switchComponentReference[targetView.value];
    }
</script>
<style>
.switch-bar{
display: flex;
  justify-content: flex-end;
}
</style>